<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{post.page.detail}">Title</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        function resizePageSize(){
            _gridWidth = $(document).width();/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-200; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }
        var roleUuid;
        $(function () {
            query();
            resizePageSize();
            var _columnWidth = _gridWidth/3;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{queryRoleMenuList}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : /*[[#{menu.id}]]*/"",name : 'menuId',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{menu.name}]]*/"",name : 'menuName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{menu.privilegeCode}]]*/"",name : 'privilegeCode',width : _columnWidth, sortable : true,align : 'center'},
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowbinddata : true

            });
            queryMenu();

        });//ready

        function query() {
            var dutyId = /*[[${session.dutyId}]]*/'';
            $("#duty-id").text(dutyId);
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/job/queryPostInfoById}]]*/'',
                data: [{name:"dutyId",value:dutyId}],
                success: function (data) {
                    console.info(data);
                    $("#duty-name").text(data.dutyName);
                    $("#duty-organ").text(data.organName);
                    $("#duty-role").text(data.roleName);
                    $("#duty-remark").text(data.remark);
                    roleUuid=data.roleUuid;
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }
        function queryMenu() {
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"roleUuid",value:roleUuid}
                ]
            }).flexReload();

        }
    </script>
</head>
<body>
<div style="flex-grow: 1;display: flex;flex-direction: column;">
    <article style="flex-basis: 200px;">
        <form style="display: grid;grid-template-columns: auto auto">
            <div class="form-group">
                <span th:text="#{duty.id}"></span>
                <span id="duty-id" class="form-control"></span>
            </div>
            <div class="form-group">
                <span th:text="#{duty.name}"></span>
                <span id="duty-name" class="form-control"></span>
            </div>
            <div class="form-group">
                <span th:text="#{duty.organ.name}"></span>
                <span id="duty-organ" class="form-control"></span>
            </div>
            <div class="form-group">
                <span th:text="#{duty.role.name}"></span>
                <span id="duty-role" class="form-control"></span>
            </div>
            <div class="form-group">
                <span th:text="#{duty.remark}"></span>
                <span id="duty-remark" class="form-control"></span>
            </div>



        </form>
    </article>
    <article style="flex-grow: 1;margin-top:10px;">
        <ul id="tab-ul-post-id" class="nav nav-tabs">
            <li tab="tab-post-id">
                <a href="#">
                    <i class="fa fa-university"></i>
                    <span th:text="#{post.role.menu}"></span>
                </a>
            </li>
        </ul>
        <section id="tab-content-id" class="tab-content">
            <article id="tab-post-id" class="tab-pane fade in active">
                <table id="flexigrid-id"></table>
            </article>
        </section>

    </article>
</div>
</body>
</html>